<template>
  <div class="app-container">
    <el-card class="box-card" style="margin-bottom: 20px;">
      <div slot="header" class="clearfix">
        <span>报表字段配置</span>
        <el-select v-model="currentReportCode" placeholder="请选择报表" style="margin-left: 20px; width: 200px;" @change="handleReportChange">
          <el-option label="销售明细报表" value="sale_detail"></el-option>
          <el-option label="销售汇总报表" value="sale_summary"></el-option>
          <el-option label="采购明细报表" value="purch_detail"></el-option>
          <el-option label="采购汇总报表" value="purch_summary"></el-option>
        </el-select>
      </div>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增字段</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-check"
            size="mini"
            @click="handleSave"
          >保存配置</el-button>
        </el-col>
      </el-row>

      <el-table
        v-loading="loading"
        :data="fieldList"
        border
        row-key="id"
      >
        <el-table-column label="字段名" align="center" prop="fieldName" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fieldName" placeholder="请输入字段名" size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="显示名称" align="center" prop="fieldLabel" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fieldLabel" placeholder="请输入显示名称" size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="字段类型" align="center" prop="fieldType" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.fieldType" placeholder="请选择" size="small">
              <el-option label="文本" value="text"></el-option>
              <el-option label="数字" value="number"></el-option>
              <el-option label="日期" value="date"></el-option>
              <el-option label="字典" value="dict"></el-option>
              <el-option label="下拉" value="select"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="字典类型" align="center" prop="dictType" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.dictType" placeholder="字典类型" size="small" :disabled="scope.row.fieldType !== 'dict'"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="列表显示" align="center" prop="isList" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isList" active-value="1" inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="列表排序" align="center" prop="listSort" width="100">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.listSort" :min="0" size="small" controls-position="right"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="查询字段" align="center" prop="isQuery" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isQuery" active-value="1" inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="查询排序" align="center" prop="querySort" width="100">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.querySort" :min="0" size="small" controls-position="right"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="查询方式" align="center" prop="queryType" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.queryType" placeholder="请选择" size="small" :disabled="scope.row.isQuery !== '1'">
              <el-option label="等于" value="EQ"></el-option>
              <el-option label="不等于" value="NE"></el-option>
              <el-option label="大于" value="GT"></el-option>
              <el-option label="小于" value="LT"></el-option>
              <el-option label="模糊" value="LIKE"></el-option>
              <el-option label="范围" value="BETWEEN"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="列宽" align="center" prop="columnWidth" width="100">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.columnWidth" :min="80" size="small" controls-position="right"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="对齐方式" align="center" prop="align" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.align" placeholder="请选择" size="small">
              <el-option label="左对齐" value="left"></el-option>
              <el-option label="居中" value="center"></el-option>
              <el-option label="右对齐" value="right"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="是否导出" align="center" prop="isExport" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isExport" active-value="1" inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getFieldsByCode, batchSaveFieldConfig } from "@/api/report/config"

export default {
  name: "ReportConfig",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 当前报表编码
      currentReportCode: 'sale_detail',
      // 字段列表
      fieldList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询字段配置列表 */
    getList() {
      this.loading = true;
      getFieldsByCode(this.currentReportCode).then(response => {
        this.fieldList = response.data;
        this.loading = false;
      });
    },
    /** 切换报表 */
    handleReportChange() {
      this.getList();
    },
    /** 新增字段 */
    handleAdd() {
      const newField = {
        id: null,
        reportCode: this.currentReportCode,
        fieldName: '',
        fieldLabel: '',
        fieldType: 'text',
        dictType: '',
        isList: '1',
        isQuery: '0',
        isExport: '1',
        isSummary: '0',
        queryType: 'EQ',
        listSort: this.fieldList.length + 1,
        querySort: 0,
        columnWidth: 120,
        align: 'center',
        status: '0'
      };
      this.fieldList.push(newField);
    },
    /** 删除字段 */
    handleDelete(index) {
      this.$confirm('是否确认删除该字段配置?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.fieldList.splice(index, 1);
        this.$message.success("删除成功");
      }).catch(() => {});
    },
    /** 保存配置 */
    handleSave() {
      // 验证必填项
      for (let i = 0; i < this.fieldList.length; i++) {
        const field = this.fieldList[i];
        if (!field.fieldName || !field.fieldLabel) {
          this.$message.error(`第${i + 1}行字段名和显示名称不能为空`);
          return;
        }
      }

      this.loading = true;
      batchSaveFieldConfig(this.currentReportCode, this.fieldList).then(response => {
        this.$message.success("保存成功");
        this.getList();
      }).finally(() => {
        this.loading = false;
      });
    }
  }
};
</script>
